<template>
<div id="addRole">
			<!--整体开始-->
			<div style="width:1200px; height: 60px; margin: auto;">
				<!--头部开始-->
				<div style="width: 1200px; height:40px;background-image: linear-gradient(to bottom,  rgb(211,211,211),rgb(245,245,245)); line-height: 40px;">
					&nbsp;&nbsp;<i class="el-icon-user-solid"></i>&nbsp;<span style="color: rgb(26,113,165); font-size: 17px; font-weight:900;">角色附加</span>
				</div>
				<!--头部结束-->
				<!--中间开始-->
				<div style="width: 1200px; height:600px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);margin-top: 5px; ">
					<div style="widows: 1200px; height: 50px;background-color: rgb(247,247,255)">
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-size: 18px;">角色名称:</span>&nbsp;
						<el-input placeholder="角色名称" v-model="jurisdiction.jurisdictionname" style="width:200px;"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<span style="font-size: 18px;">角色编号:</span>&nbsp;
						<el-input placeholder="角色编号" v-model="jurisdiction.jurisdictioncode" style="width:200px;"></el-input>
						<el-button type="primary" style="margin-left: 390px;" @click="addjurisdiction()">保 存</el-button>
					</div>
					<!--角色列表-->
					<div>
						<template>
							<el-table ref="singleTable" :data="jurisdictions" highlight-current-row @current-change="handleCurrentChange" border>
								<el-table-column label="序号">
									<template slot-scope="temp">
										{{temp.$index+1}}
									</template>
								</el-table-column>
								<el-table-column property="jurisdictionname" label="角色名称">
								</el-table-column>
								<el-table-column property="jurisdictioncode" label="角色编号">
								</el-table-column>
								<el-table-column property="createdate" label="创建时间">
								</el-table-column>
								<el-table-column property="createby" label="创建人">
								</el-table-column>
								<el-table-column label="操作">
									<template slot-scope="temp">
										<el-button type="primary" @click="Modifyjurisdiction=true,amendJurisdiction(temp.row.jurisdictionid)"  icon="el-icon-edit" circle></el-button>
									</template>
								</el-table-column>
							</el-table>
						</template>
					</div>

				</div>
				<!--中间结束-->
			</div>
			<!--整体结束-->

			<!--修改弹出框开始-->
				<el-dialog title="修改角色" :visible.sync="Modifyjurisdiction" width="45%" :before-close="handleCloses">
					<div>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-size: 18px;">角色名称:</span>&nbsp;
						<el-input placeholder="角色名称" v-model="newJurisdiction.jurisdictionname"  style="width:200px;"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<span style="font-size: 18px;">角色编号:</span>&nbsp;
						<el-input placeholder="角色编号" v-model="newJurisdiction.jurisdictioncode"  style="width:200px;"></el-input>
					</div>
				<span slot="footer" class="dialog-footer">
			    <el-button @click="Modifyjurisdiction = false,showInfo()">取 消</el-button>
			    <el-button type="primary"  @click="Modifyjurisdiction = false,ModifyConfirmButton()">确 定</el-button>
			    </span>
			</el-dialog>
			<!--修改弹出框结束-->
		</div>
</template>

<script>
export default {
data() {
//这里存放数据
return {
    jurisdictions:[],
    jurisdiction:{},
	Modifyjurisdiction:false,
	newJurisdiction:{}
};
},
//计算属性
computed: {},
//方法集合
methods: {
    showInfo(){
        let _this=this;
        _this.$http.get(`http://localhost:8080/api/JurisdictionAction/queryJurisdiction`).then(function (resp){
            _this.jurisdictions=resp.data;
        });
    },
    addjurisdiction(){
         let _this=this;
        if(this.jurisdiction.jurisdictionname==""){
            _this.$message.error('错了哦，角色名称不能为空!!');
            return;
        }
          if(this.jurisdiction.jurisdictioncode==""){
            _this.$message.error('错了哦，角色编号不能为空!!');
            return;
        }
        let name= this.$store.getters.getUser.ename;
        _this.jurisdiction.createby=name;
        _this.$http.post(`http://localhost:8080/api/JurisdictionAction/addJurisdiction`,_this.jurisdiction).then(function (resp){ 
            if(resp.data.code=="200"){
                _this.$message({
					message: '恭喜你，保存成功!!',
					type: 'success'
				});
            }else{
                 _this.$message.error('错了哦，保存失败!!');
            }
			_this.showInfo();
        });
    },
	amendJurisdiction(id){
		for(let i=0;i<this.jurisdictions.length;i++){
			if(this.jurisdictions[i].jurisdictionid==id){
				this.newJurisdiction=this.jurisdictions[i];
			}
		}
	},
	ModifyConfirmButton(){
		let _this=this;
		_this.$http.put(`http://localhost:8080/api/JurisdictionAction/amendJurisdiction`,_this.newJurisdiction).then(function (resp){
			if(resp.data.code=="200"){
				 _this.$message({
					message: '恭喜你，更新成功!!',
					type: 'success'
				});
			}else{
				 _this.$message.error('错了哦，更新失败!!');
			}
		});
	},
	handleCloses(done) {
		this.$confirm('确认关闭？')
			.then(_ => {
				this.showInfo();
				done();
			}).catch(_ => {});
	}
},
//挂载完成（可以访问DOM元素）
mounted() {
this.showInfo();
},
//监控data中的数据变化
watch: {

}
}
</script>
<style  scoped>
/*@import url(); 引入公共css类*/

</style>